/*1.预览选中的图片*/
let ctx=$('#myCanvas')[0].getContext('2d')
let newctx=$('#newCanvas')[0].getContext('2d')
$('#upload').change(function () {
    /*1.获取选中的图片文件*/
let imgFile=this.files[0]
   let reader=new FileReader()
    reader.readAsDataURL(imgFile)
    reader.onload=()=>{
        let img=new Image()
        img.src=reader.result
        img.onload=function () {
            ctx.drawImage(img,0,0,400,400)
        }
    }
})
/*2.拖动cutbox*/
$('#cutBox').mousedown(function (e) {
    let dowmEvent=e
    /*cutBox有定位属性的时候dowmEvent.offsetX是不起作用的*/
    let downLeft=dowmEvent.clientX
    let downTop=dowmEvent.clientY
    let x=parseInt($(this).css('left'))
    let y=parseInt($(this).css('top'))
    console.log(downLeft)
    console.log(downTop)
    $(this).mousemove(function (event) {
        let moveEvent=event
        $(this).css({
            left:moveEvent.clientX-downLeft+x+'px',
            top:moveEvent.clientY-downTop+y+'px'
        })
    })

})
/*3.当鼠标抬起的时候 需要将cutBox里面裁剪的图片  渲染到  新的newCanvas里面去*/
$('#cutBox').mouseup(function () {
    $('#cutBox').off('mousemove')
    let x=parseInt($(this).css('left'))
    let y=parseInt($(this).css('top'))
    // $("#myCanvas")[0].getImageData(起始X,起始Y,宽,高)
    let imgData=ctx.getImageData(x,y,150,150)
    newctx.putImageData(imgData,0,0,)
})
/*3.点击上传   将头像上传到数据库*/
$('#uploadBtn').click(function () {
    /*1先获取要上传的头像的路径*/
let imgUrl=$('#newCanvas')[0].toDataURL()
    $.ajax({
        url:'/uploadphoto',
        type:'post',
        data:{imgUrl},
        success(data){

        }
    })

})